<script lang="ts" setup>
import EchartsComp from "@/components/echartsComp.vue";
import { getQueryObject } from "@/utils/index";
import { useChartLine, useChartPie, useChartBarY } from "@/hooks/useChart";

interface projectType {
  label: string;
  value: string;
}

const showProject = ref<Boolean>(false);
const nowproject = ref<String>("");
const project = ref<projectType[]>([]);

const prochange = () => {};

const appTitle = import.meta.env.VITE_APP_TITLE

// 左边
const optionLeftA = ref<any>(null);
const optionLeftB = ref<any>(null);
const optionLeftC = ref<any>(null);
// 右边
const optionRightA = ref<any>(null);
const optionRightB = ref<any>(null);
const optionRightC = ref<any>(null);
// 下边
const optionBottomA = ref<any>(null);
const optionBottomB = ref<any>(null);
const optionBottomC = ref<any>(null);

const useEChart = () => {
  optionLeftA.value = useChartLine(
    "总产量",
    ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    [120, 132, 101, 134, 170, 230, 210]
  );

  optionLeftB.value = useChartPie("故障类型前五占比", [
    { value: 50, name: "未知" },
    { value: 14, name: "漏气" },
    { value: 11, name: "跳闸" },
    { value: 9, name: "漏油" },
    { value: 2, name: "停机" },
  ]);

  optionLeftC.value = useChartBarY(
    "总产量排名",
    ["鼓浪屿", "欢乐世界", "贵安谷", "罗源湾", "滨海新城"],
    [23, 29, 104, 131, 630]
  );

  optionRightA.value = useChartLine(
    "总产量",
    ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    [120, 132, 101, 134, 170, 230, 210]
  );

  optionRightB.value = useChartPie("故障类型前五占比", [
    { value: 50, name: "未知" },
    { value: 14, name: "漏气" },
    { value: 11, name: "跳闸" },
    { value: 9, name: "漏油" },
    { value: 2, name: "停机" },
  ]);

  optionRightC.value = useChartBarY(
    "总产量排名",
    ["鼓浪屿", "欢乐世界", "贵安谷", "罗源湾", "滨海新城"],
    [23, 29, 104, 131, 630]
  );

  optionBottomA.value = useChartLine(
    "总产量",
    ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    [120, 132, 101, 134, 170, 230, 210]
  );

  optionBottomB.value = useChartPie("故障类型前五占比", [
    { value: 50, name: "未知" },
    { value: 14, name: "漏气" },
    { value: 11, name: "跳闸" },
    { value: 9, name: "漏油" },
    { value: 2, name: "停机" },
  ]);

  optionBottomC.value = useChartBarY(
    "总产量排名",
    ["鼓浪屿", "欢乐世界", "贵安谷", "罗源湾", "滨海新城"],
    [23, 29, 104, 131, 630]
  );
};

onMounted(() => {
  getQueryObject("");
  useEChart();
});
</script>

<template>
  <div id="home">
    <div id="mapContent" style="">
      <iframe id="byzt"  src="" frameborder="0"></iframe>
    </div>
    <div class="header" style="position: absolute; width: 100%">
      <el-row>
        <el-col :span="9"> </el-col>
        <el-col :span="6">
          <div class="title">{{appTitle}}</div>
          <el-row
            type="flex"
            v-show="showProject"
            justify="center"
            class="sel-wrap"
          >
            <span style="color: #fff; padding-right: 10px; padding-top: 3px"
              >当前项目:</span
            >
            <el-select
              size="mini"
              @change="prochange"
              v-model="nowproject"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in project"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-row>
        </el-col>
        <el-col :span="9"> </el-col>
      </el-row>
    </div>

  
    <div class="left-bar">
      <div class="xpanel-wrapper xpanel-wrapper-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionLeftA"
                idName="leftA"
                width="100%"
                height="100%"
                :option="optionLeftA"
              ></EchartsComp>
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapper xpanel-wrapper-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionLeftB"
                idName="leftB"
                width="100%"
                height="100%"
                :option="optionLeftB"
              ></EchartsComp>
              <!-- <div id="leftB" style="width: 100%; height: 100%"></div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapper xpanel-wrapper-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionLeftC"
                idName="leftC"
                width="100%"
                height="100%"
                :option="optionLeftC"
              ></EchartsComp>
              <!-- <div id="leftC" style="width: 100%; height: 100%"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-bar">
      <div class="xpanel-wrapper xpanel-wrapper-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionRightA"
                idName="rightA"
                width="100%"
                height="100%"
                :option="optionRightA"
              ></EchartsComp>
              <!-- <div id="rightA" style="width: 100%; height: 100%"></div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapper xpanel-wrapper-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionRightB"
                idName="rightB"
                width="100%"
                height="100%"
                :option="optionRightB"
              ></EchartsComp>
              <!-- <div id="rightB" style="width: 100%; height: 100%"></div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapper xpanel-wrapper-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionRightC"
                idName="rightC"
                width="100%"
                height="100%"
                :option="optionRightC"
              ></EchartsComp>
              <!-- <div id="rightC" style="width: 100%; height: 100%"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div  class="bottom-bar">
      <div class="xpanel-wrapperW xpanel-wrapperW-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionBottomA"
                idName="bottomA"
                width="100%"
                height="100%"
                :option="optionBottomA"
              ></EchartsComp>
              <!-- <div id="bottomA" style="width: 100%; height: 100%"></div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapperW xpanel-wrapperW-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionBottomB"
                idName="bottomB"
                width="100%"
                height="100%"
                :option="optionBottomB"
              ></EchartsComp>
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapperW xpanel-wrapperW-4">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="chart">
              <EchartsComp
                v-if="optionBottomC"
                idName="bottomC"
                width="100%"
                height="100%"
                :option="optionBottomC"
              ></EchartsComp>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="false" :span="7" class="top-bar">
      <div class="xpanel-wrapperW xpanel-wrapperW-3">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="sensorContent" style="width: 100%; padding: 5px">
              <div class="sensorName">
                <span>总项目数</span>
              </div>
              <div class="sensorValue">
                <span>10</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapperW xpanel-wrapperW-3">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="sensorContent" style="width: 100%; padding: 5px">
              <div class="sensorName">
                <span>总产量</span>
              </div>
              <div class="sensorValue">
                <span>100944</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapperW xpanel-wrapperW-3">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="sensorContent" style="width: 100%; padding: 5px">
              <div class="sensorName">
                <span>总能耗</span>
              </div>
              <div class="sensorValue">
                <span>1023423</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xpanel-wrapperW xpanel-wrapperW-3">
        <div class="xpanel common-wrap device-list">
          <div class="common-inner">
            <div class="sensorContent" style="width: 100%; padding: 5px">
              <div class="sensorName">
                <span>未处理故障数</span>
              </div>
              <div class="sensorValue">
                <span>239</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/home/css/index.scss");
#home {
}
</style>